<template>
    <div style="padding-bottom: 50px;">
        <div class="home_swipe">
            <img src="http://lf-public.oss-cn-shenzhen.aliyuncs.com/explore/card_back.png" class="home_swipe_back" alt="">
            <div style="padding-top: 20px;">
                <van-swipe class="my-swipe" :autoplay="5000">
                    <van-swipe-item>
                        <div class="swipe_card" @click="$router.push('/lottery/buy')">
                            <van-image src="http://lf-public.oss-cn-shenzhen.aliyuncs.com/explore/card23.png" fit="contain" class="swipe_back"></van-image>
                        </div>
                    </van-swipe-item>
                    <van-swipe-item>
                        <div class="swipe_card" @click="$router.push('/explore/buy')">
                            <van-image src="http://lf-public.oss-cn-shenzhen.aliyuncs.com/explore/card32.png" fit="contain" class="swipe_back"></van-image>
                        </div>
                    </van-swipe-item>
                    <van-swipe-item>
                        <div class="swipe_card" @click="cardDetail">
                            <van-image src="http://lf-public.oss-cn-shenzhen.aliyuncs.com/explore/card11.png" fit="contain" class="swipe_back"></van-image>
                        </div>
                    </van-swipe-item>
                    <template #indicator>
                        <div></div>
                    </template>
                </van-swipe>
            </div>
        </div>

        <div class="main_icon">
            <div @click="$router.push('/explore/buy')">
                <img src="http://lf-public.oss-cn-shenzhen.aliyuncs.com/explore/icon1.png" width="50px;">
                <span>补写点评</span>
            </div>
            <div @click="$router.push('/lottery/buy')" style="position: relative;">
                <img src="http://lf-public.oss-cn-shenzhen.aliyuncs.com/explore/icon2.png" width="50px;">
                <span>发布霸王餐</span>
<!--                <div style="position: absolute;top: -5px;width: 100%;padding-left: 20px;">-->
<!--                    <van-tag color="#ff6034" round style="margin: 0 auto;font-size: 12px;padding:1px 4px;">限时1元</van-tag>-->
<!--                </div>-->
            </div>
            <div @click="$router.push('/buyVip')">
                <img src="http://lf-public.oss-cn-shenzhen.aliyuncs.com/explore/icon3.png" width="50px;">
                <span>黑卡会员</span>
            </div>
            <div @click="$router.push('/shop')">
                <img src="http://lf-public.oss-cn-shenzhen.aliyuncs.com/explore/icon4.png" width="50px;">
                <span>绑定店铺</span>
            </div>
        </div>
        <div class="container">
            <div>
                <div style="font-size: 15px;font-weight: bold;padding: 10px 10px 0px 20px;border-radius:10px 10px 0 0;margin-bottom:5px;">
                    <span>免费课程</span>
                </div>
                <div style="background: #fff;border-radius: 0 0 10px 10px;overflow: hidden;padding-bottom: 10px;">
                    <van-card v-for="item in course_free"
                              v-bind:key="item.course_id"
                              @click="lessonDetail(item)">
                        <div slot="thumb" style="position: relative;">
                            <van-image :src="item.title_img"></van-image>
                        </div>
                        <div slot="title">
                            <p style="font-weight: bold;font-size: 15px;margin: 0 0 3px;">{{item.title}}</p>
                        </div>
                        <div slot="desc">
                            <span style="color: #666;font-size: 12px;">{{item.subtitle}}</span>
                        </div>
                        <div slot="price">
                            <span style="color: #e2ba7f;font-weight: bold;font-size: 15px;">¥0.00</span>
                        </div>
                        <div slot="origin-price">
                            <span v-if="!item.is_delete">{{(item.price_before === item.price || item.bought) ? null:'¥'+item.price_before}}</span>
                        </div>
                        <div slot="num">
                            <span v-if="item.learning_num" style="font-size: 14px;">&nbsp;{{item.learning_num}}人在学</span>
                            <van-image v-if="item.is_delete" :src="lockIcon" width="10"></van-image>
                        </div>
                    </van-card>
                </div>
            </div>
            <div>
                <div style="font-size: 15px;font-weight: bold;padding: 10px 10px 0px 20px;border-radius:10px 10px 0 0;margin-bottom:5px;">
                    <span>进阶学习</span>
                </div>
                <div style="background: #fff;border-radius: 0 0 10px 10px;overflow: hidden;padding-bottom: 10px;">
                    <van-card v-for="item in course"
                              v-bind:key="item.course_id"
                              @click="lessonDetail(item)">
                        <div slot="thumb" style="position: relative;">
                            <van-image :src="item.title_img"></van-image>
                            <span v-if="item.price == 0 && !item.bought && !item.is_delete"
                                  style="position: absolute;top: -7px;left: -8px;background: #ff0000;color: #fff;font-size: 12px;border-radius: 6px;padding:2px 3px;line-height: 12px;">限时免费</span>
                            <!--<span v-if="item.price_before !== item.price && !item.bought && !item.is_delete"-->
                            <!--style="position: absolute;top: -7px;left: -8px;background: #ff0000;color: #fff;font-size: 12px;border-radius: 6px;padding:2px 3px;line-height: 12px;">限时优惠</span>-->
                        </div>
                        <div slot="title">
                            <p style="font-weight: bold;font-size: 15px;margin: 0 0 3px;">{{item.title}}</p>
                        </div>
                        <div slot="desc">
                            <span style="color: #666;font-size: 12px;">{{item.subtitle}}</span>
                        </div>
                        <div slot="price">
                            <span style="color: #e2ba7f;font-weight: bold;font-size: 15px;" v-if="!item.is_delete">{{item.bought? null: '¥'+item.price}}</span>
                            <span style="color: #e2ba7f;font-weight: bold;font-size: 15px;" v-else>{{'¥'+item.price_before}}</span>
                            <van-tag v-if="item.bought" plain>已购买</van-tag>
                        </div>
                        <div slot="origin-price">
                            <span v-if="!item.is_delete">{{(item.price_before === item.price || item.bought) ? null:'¥'+item.price_before}}</span>
                        </div>
                        <div slot="num">
                            <span v-if="item.learning_num" style="font-size: 14px;">&nbsp;{{item.learning_num}}人在学</span>
                            <van-image v-if="item.is_delete" :src="lockIcon" width="10"></van-image>
                        </div>
                    </van-card>
                </div>
            </div>
        </div>

        <div style="display:flex;margin-bottom: 20px;justify-content: center;align-items: center;">
            <span style="height: 1px;width: 30px;background: #aaa;display: block;"></span>
            <span style="font-size: 12px;display: block;margin: 0 10px;color: #aaa;font-weight: normal;">我是有底线的</span>
            <span style="height: 1px;width: 30px;background: #aaa;display: block;"></span>
        </div>

        <shop-tabbar-dialog :active="0" @navigate="navigate"></shop-tabbar-dialog>
    </div>
</template>

<script>
    import {Toast, Dialog} from 'vant';
    import {mapState} from 'vuex';
    import ShopTabbarDialog from "../Common/Dialog/ShopTabbarDialog";

    export default {
        name: "Home",
        computed: {
            ...mapState(['common'])
        },
        components: {
            ShopTabbarDialog,
        },
        data() {
            return {
                loadSuccess: false,
                lockIcon: require('../../assets/img/lock.png'),
                course: [],
                course_free: [],
                active: 0,
            }
        },
        mounted() {
            this.loadData();
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        },
        methods: {
            navigate(page){
                this.$router.replace(page);
            },
            loadData() {
                this.post('/api/client/course/store').then(result => {
                    if (result.code === 0) {
                        for(let i=0;i<result.data.course_message.length;i++){
                            if(result.data.course_message[i].price == 0 && !result.data.course_message[i].bought && !result.data.course_message[i].is_delete){
                                this.course_free.push(result.data.course_message[i]);
                            } else {
                                this.course.push(result.data.course_message[i]);
                            }
                        }
                        if(!result.data.is_business){
                            this.$router.replace('/shop');
                        }
                        this.loadSuccess = true;
                    } else {
                        Toast.fail(result.msg);
                    }
                })
            },
            cardDetail() {
                this.$router.push('/buyVip');
            },
            lessonDetail(item) {
                if (item.is_delete) {
                    Toast('尚未开课，敬请期待~');
                    return;
                }
                if (!item.bought && item.price > 0) {
                    this.$router.push({path: '/courseBuy', query: {course_id: item.course_id}});
                } else {
                    this.$router.push({path: '/courseDetail', query: {course_id: item.course_id}});
                }
            },
        },
    }
</script>

<style scoped>
    .my-swipe{
        height: 220px;
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        /*text-align: center;*/
    }
    .main_icon{
        display: flex;
        justify-content: space-around;
        padding: 0 20px;
        margin: 10px 0 25px;
    }
    .main_icon>div{
        background: #f7f8fa;
        flex: 1 0 auto;
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    .main_icon>div img{
        margin: 0 auto 5px;
    }
    .main_icon>div span{
        font-size: 12px;
    }
    .container > div {
        margin: 20px 18px;
        border-radius: 10px;
        background: #fff;
        border: none;
        box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5);
    }
    .van-card{
        background: #fff;
    }
    .van-card__thumb{
        height: 70px;
        width: 70px;
    }
    .van-card__content{
        min-height: 70px;
        padding-left: 5px;
    }
    .swipe_back{
        padding: 0 18px;
    }
</style>